<script>
import { listUser } from "@/api/system/user";
import {
  getStorageLcoal,
  storageLocationManagement_ImportAPI,
} from "@/api/data/storage-location-management.js";
import dmbForm from "@/components/DmbForm";
import dmbTable from "@/components/LTable/index.vue";
import {
  formBase,
  tableBase,
  cellStyle,
  headerCellStyle,
  tableFormStyle,
  formItemStyle,
} from "./config";
import { storageLocationManagement_DelAPI } from "@/api/data/storage-location-management.js";
import { mapState } from "vuex";
import dayjs from "dayjs";
import store from "@/store";
const defaultForm = {
  createBy: "",
  formula: "",
  endTime: "",
  startTime: "",
  shopId: "",
  destinationId: "",
  cargoId: "",
  warehouseId: "",
  timelyId: "",
};

export default {
  name: "storage-location-management",
  computed: {
    ...mapState({
      company: (state) => state.custom_dict.company,
    }),
    formItemStyle() {
      return formItemStyle;
    },
    tableFormStyle() {
      return tableFormStyle;
    },
    cellStyle() {
      return cellStyle;
    },
    headerCellStyle() {
      return headerCellStyle;
    },
  },
  components: { dmbTable, dmbForm },
  data() {
    return {
      propsSearchForm: { ...defaultForm },
      rebase: formBase,
      requestConfig: {
        url: "/base/manage/locationInfo/list",
        method: "get",
        montage: true,
      },
      saveRequest: {
        url: "/base/manage/locationInfo/save",
        method: "post",
        montage: false,
      },
      selectionArr: [], // 多选框内容
      tableSearchForm: { ...defaultForm },
      listUser: [],
      dialogObj: {
        visible: false,
        data: [
          {
            dictValue: "",
          },
          {
            dictValue: "",
          },
        ],
      },
      inputfile: null,
      upload_file: [], // 文件上传列表
      msg: "",
    };
  },
  methods: {
    tableBase() {
      return tableBase;
    },
    // 多选框内容
    selectionChange(data) {
      this.selectionArr = data;
    },

    async del(id) {
      await this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await storageLocationManagement_DelAPI(id);
      this.$refs.table.getListData();
      this.$message.success("删除成功");
    },

    // 打开弹框获取属性设置
    openDialogGetType() {
      getStorageLcoal().then((res) => {
        this.dialogObj.data = res.data.map((item) => {
          return {
            dictCode: item.dictCode,
            dictLabel: item.dictLabel,
            dictValue: item.dictValue,
          };
        });
        this.dialogObj.visible = true;
      });
    },

    // 关闭弹框的操作
    handleClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
          setStorageLcoal(this.dialogObj.data).then((res) => {
            this.dialogObj.visible = false;
          });
        })
        .catch((_) => {});
    },
    // 导出
    downLoad() {
      if (this.selectionArr.length > 0) {
        const ids = this.selectionArr.map((item) => {
          return item.id;
        });

        this.download(
          "/base/manage/locationInfo/exportLocationInfo",
          {
            ids,
          },
          `库位管理_${dayjs().format("YYYY/MM/DD hh:mm:ss")}.xlsx`
        );
      } else {
        this.$message.error("请选择条数据导出");
      }
    },
    // 导入
    importFile() {
      this.$refs.inputfile.click();
    },
    changeExcel(e) {
      try {
        const that = this;
        // 错误情况判断
        const files = e.target.files[0];
        console.log(files);
        if (files.length <= 0) {
          return false;
        }
        let data = new FormData();
        data.append("file", files);
        storageLocationManagement_ImportAPI(data).then((res) => {
          this.$message.success("导入成功");
        });
      } catch {}
    },
  },
  watch: {
    propsSearchForm: {
      deep: true,
      handler: function (value) {
        this.tableSearchForm = { ...value };
        delete this.tableSearchForm.shelfTime;
        // 日期
        if (!value?.shelfTime?.length) {
          this.tableSearchForm.startTime = "";
          this.tableSearchForm.endTime = "";
        } else if (value?.shelfTime?.length) {
          this.tableSearchForm.startTime = dayjs(value.shelfTime[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.tableSearchForm.endTime = dayjs(value.shelfTime[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
      },
    },
  },
};
</script>

<template>
  <div>
    <div class="mb-3">
      <dmb-form
        ref="form"
        :form-items="rebase"
        :model-value="propsSearchForm"
        :item-style="formItemStyle"
       @update="(row) => (propsSearchForm = row)"
      >
        <template v-slot:header="row" class="flex flex-row-reverse">
          <div class="my-3 flex flex-row-reverse">
            <div>
              <el-button type="success" @click="$refs.table.getListData()"
                >查询</el-button
              >
              <el-button type="success" @click="$refs.table.saveToUpdate()"
                >保存</el-button
              >
              <el-button type="primary" @click="openDialogGetType"
                >设置属性</el-button
              >
              <el-button type="primary" @click="downLoad">导出</el-button>
              <el-button type="primary" @click="importFile">导入</el-button>
              <!-- 不显示 文件上传的图标 -->
              <input
                type="file"
                accept=".xls,.xlsx"
                ref="inputfile"
                @change="changeExcel"
                class="hidden"
              />
            </div>
          </div>
        </template>
      </dmb-form>
    </div>
    <div>
      <dmb-table
        ref="table"
        :prop-list="tableBase()"
        :operateWether="true"
        :is-operate="true"
        :show-index-column="true"
        select-column-type="CHECKBOX"
        :props-search-form="tableSearchForm"
        :req-request="requestConfig"
        :isSaveToUpadate="true"
        :saveRequest="saveRequest"
        select-key="id"
        :cell-style="cellStyle"
        :header-cell-style="headerCellStyle"
        :initialize="false"
        :change-search-form="false"
        :show-footer="true"
        :form-item-style="tableFormStyle"
        @selectionChange="
          (row) => {
            selectionArr = row;
          }
        "
      >
        <template v-slot:operate="{ row }">
          <el-button type="danger" v-if="row.id" @click="del(row.id)"
            >删除</el-button
          >
        </template>
      </dmb-table>
    </div>
    <el-dialog
      title="修改属性"
      :visible.sync="dialogObj.visible"
      width="30%"
      :before-close="handleClose"
      destroy-on-close
      :close-on-click-modal="true"
    >
      <div>系统依次按以下规判断</div>
      <div class="flex items-center mt-3">
        <span>重量 > </span>
        <el-input-number
          v-model="dialogObj.data[0].dictValue"
          class="w-[150px] mx-3"
        />
        <span>放大货区(L)</span>
      </div>
      <div class="flex items-center mt-3">
        <span>重量 > </span>
        <el-input-number
          v-model="dialogObj.data[1].dictValue"
          class="w-[150px] mx-3"
        />
        <span>放中货区(M)</span>
      </div>
      <div class="mt-3">其他放小库区(S)</div>
      <el-button type="primary" @click="handleClose" class="mt-3"
        >保存</el-button
      >
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
</style>
